<template>
  <div>
    <heads />

    <Main :type="'form'">
      <el-row>
        <el-col :span="24">
          <el-form ref="form" label-width="120px" :model="form" :rules="form">
            <el-form-item
              label="自定义名称"
              prop="name"
              :rules="{
                required: true,
                message: '请输入自定义名称',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model="form.name"
                class="form-input"
                size="medium"
                :maxlength="20"
                placeholder="请输入自定义名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="设置为默认配送方式"
              prop="is_default"
              :rules="{
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }"
            >
              <el-switch
                v-model="form.is_default"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
              &nbsp;
              <span style="color:#909399">{{
                form.is_default ? "已开启" : "已关闭"
              }}</span>
            </el-form-item>
            <el-form-item
              label="自定义配送时间"
              prop="is_custom_time"
              :rules="{
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }"
            >
              <el-switch
                v-model="form.is_custom_time"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
              &nbsp;
              <span style="color:#909399">{{
                form.is_custom_time ? "已开启" : "已关闭"
              }}</span>
              <div v-if="form.is_custom_time">
                <el-radio-group v-model="form.type">
                  <el-radio :label="1">使用固定配送时间选项</el-radio>
                  <el-radio :label="2"
                    >自定义配送时间选项</el-radio
                  > </el-radio-group
                ><br />
                <div v-if="form.type == 1">
                  工作日、双休日或节假日可送货/只工作日送货/只双休日、节假日送货
                </div>
                <div v-if="form.type == 2" class="timesInterval">
                  最早可配送时间，下单后&nbsp;&nbsp;<el-input-number
                    v-model="form.num1"
                    size="small"
                    :min="1"
                    :precision="0"
                    :controls="false"
                  ></el-input-number
                  >&nbsp;&nbsp;天，可送货上门 <br />
                  最晚可配送时间，下单后&nbsp;&nbsp;<el-input-number
                    v-model="form.num2"
                    size="small"
                    :min="1"
                    :precision="0"
                    :controls="false"
                  ></el-input-number
                  >&nbsp;&nbsp;天，可送货上门 <br />
                </div>
              </div>
            </el-form-item>

            <!-- <el-form-item label='自定义下单字段'>
            <el-button size='mini'
                       type='text'
                       @click='edit'> 编辑 </el-button>
            <el-button size='mini'
                       type='text'
                       @click='refresh'> 刷新 </el-button> <br />
            <div class='tables'>
              <el-table :data='form.tableData'
                        :header-row-style='{color:'#333333',fontSize: '14px',letterSpacing:'0.39px'}'
                        style='width:80%;'>
                <el-table-column label='字段名称'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>
                <el-table-column label='字段格式'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>
                <el-table-column label='是否必填'>
                  <template slot-scope='scope'>
                  </template>
                </el-table-column>
                <el-table-column label='排序'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>

              </el-table>
              <div style='margin-top:10px;font-size:12px;'
                   class='add-form-item'>
                <el-button plain
                           @click='addTemplate'>新增自定义模板</el-button>
                &emsp;

              </div>

            </div>
          </el-form-item> -->
            <el-form-item label="默认运费模板">
              <span style="color:#F56C6C;">*</span>
              {{
                form.templete_name
                  ? form.templete_name
                  : "暂未设置默认运费模板"
              }}<br />
              1.新商品的默认运费模板，可在运费模板设置中
              <el-button size="mini" type="text" @click="$emit('outSet')">
                修改
              </el-button>
              <br />
              2.商家配送的可配送区域取决于运费模板
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <Footer>
        <el-button type="primary" @click="submit">保 存</el-button>
      </Footer>
    </Main>
  </div>
</template>
<script>
import { STORESETTING } from "../../service";
import heads from "../component/heads";
export default {
  components: {
    heads
  },
  data() {
    return {
      form: {
        name: "",
        is_default: false,
        is_custom_time: false,
        num1: "",
        num2: "",
        type: 1,
        templete_name: "",
        tableData: [
          {
            area: "所有区域默认配送",
            first: 1,
            first_price: 0,
            continuation: 1,
            continuation_price: 0
          }
        ]
      },
      checked: true
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    async getSetting() {
      await STORESETTING().then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.form.name = data.name;
          this.form.is_default = data.is_default === 1;
          this.form.is_custom_time = data.is_custom_time === 1;
          this.form.type = data.type;
          if (this.form.type === 2) {
            let num = data.type_content.split(",");
            this.form.num1 = num[0];
            this.form.num2 = num[1];
          }
          this.form.templete_name = data.templete_name
            ? data.templete_name
            : "暂未设置默认运费模板";
        } else {
          this.$message.error(msg);
        }
      });
    },
    edit() {
      window.open("/order/orderList");
    },

    addTemplate() {
      let tableid =
        "1" +
        new Date()
          .getTime()
          .toString()
          .substring(8) +
        Math.floor(Math.random() * (99 - 10)) +
        1;
      this.form.tableData.push({
        tableid,
        area: "",
        first: 1,
        first_price: 0,
        continuation: 1,
        continuation_price: 0
      });
    },
    delTemplate(i) {
      this.form.tableData.splice(i, 1);
    },

    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          STORESETTING({
            flag: "save",
            name: this.form.name,
            is_default: this.form.is_default ? 1 : 0,
            type: this.form.type,
            is_custom_time: this.form.is_custom_time ? 1 : 0,
            type_content:
              this.form.type === 1
                ? "工作日、双休日或节假日可送货/只工作日送货/只双休日、节假日送货"
                : `${this.form.num1},${this.form.num2}`
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$emit("outSet");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.timesInterval {
  width: 50%;
  height: 100px;
  background: #f2f2f6;
  border-radius: 6px;
  padding: 10px 50px;
  font-size: 12px;
}
</style>
